<template>
  <div style="height: 100%; width: 100%">
    <el-card class="card1">
      <template #header>
        <span style="font-size: 18px">路灯信息</span>
      </template>

      <div class="card-info-content">
        <div class="flex-box">
          <el-progress
            type="dashboard"
            status="success"
            :stroke-width="16"
            :percentage="lightStore.getBrightnessPercentage"
          >
            <template #default="{ percentage }">
              <span>{{ percentage }}%</span>
            </template>
          </el-progress>
        </div>

        <div class="info">
          <div>开关: {{ lightStore.brightness === 0 ? "关闭" : "开启" }}</div>
          <div>亮度(0~255): {{ lightStore.brightness }}</div>
          <div>状态: 正常</div>
          <div>
            模式:
            {{
              modeTable.find((item) => {
                return item.value === lightStore.mode;
              }).label
            }}
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="card2">
      <template #header>
        <span style="font-size: 18px">路灯控制</span>
      </template>

      <div class="controller mode-controller">
        <el-button text bg type="primary" @click="dialogRadioVisible = true">更改模式</el-button>
      </div>

      <div class="controller time-controller">
        <div>
          <span style="font-weight: 600">时间控制 (定时模式)</span>
          <el-button text bg :disabled="lightStore.mode !== 2" @click="confirmChangeTimeRange">确认修改</el-button>
        </div>
        <div>
          <span>开始时间</span>
          <el-time-picker
            :disabled="lightStore.mode !== 2"
            v-model="lightStore.timeRange.start"
            placeholder="开始时间"
          />
        </div>
        <div>
          <span>结束时间</span>
          <el-time-picker :disabled="lightStore.mode !== 2" v-model="lightStore.timeRange.end" placeholder="结束时间" />
        </div>
      </div>

      <div class="controller brightness-controller">
        <span style="font-weight: 600">亮度控制 (手动模式)</span>
        <div>
          <el-button-group>
            <el-button :disabled="lightStore.mode !== 3" :icon="Minus" @click="reduceBrightness" />
            <el-button :disabled="lightStore.mode !== 3" :icon="Plus" @click="increaseBrightness" />
          </el-button-group>
        </div>
      </div>
    </el-card>
  </div>

  <el-dialog
    v-model="dialogRadioVisible"
    title="修改路灯运行模式"
    width="350"
    align-center
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-radio-group v-model="radioMode" style="display: flex; flex-direction: column; justify-content: center">
      <el-radio style="margin: 0" v-for="item in modeTable" :value="item.value">{{ item.label }}</el-radio>
    </el-radio-group>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDialogl">取消</el-button>
        <el-button type="primary" @click="confirmDialog"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import useStore from "@/store";
import { Minus, Plus } from "@element-plus/icons-vue";
import { ref } from "vue";

const { lightStore, mqttStore } = useStore();

const dialogRadioVisible = ref(false);
const radioMode = ref(-1);

const modeTable = [
  {
    value: 1,
    label: "自动开关模式"
  },
  {
    value: 2,
    label: "定时开关模式"
  },
  {
    value: 3,
    label: "手动开关模式"
  }
];

const cancelDialogl = () => {
  dialogRadioVisible.value = false;
};

const confirmDialog = () => {
  dialogRadioVisible.value = false;
  lightStore.setMode(radioMode.value);

  mqttStore.publish("mode", String(lightStore.mode), 0);
};

const confirmChangeTimeRange = () => {
  const f = (t) => {
    return (
      t.getHours().toString().padStart(2, "0") +
      t.getMinutes().toString().padStart(2, "0") +
      t.getSeconds().toString().padStart(2, "0")
    );
  };
  const fmt = `${f(lightStore.timeRange.start)};${f(lightStore.timeRange.end)}`;
  mqttStore.publish("time_range", fmt, 0);
};

const reduceBrightness = () => {
  if (lightStore.reduceBrightness()) {
    mqttStore.publish("brightness", String(lightStore.brightness), 0);
  }
};

const increaseBrightness = () => {
  if (lightStore.increaseBrightness()) {
    mqttStore.publish("brightness", String(lightStore.brightness), 0);
  }
};
</script>

<style lang="less" scoped>
.flex-box {
  display: flex;
  justify-content: center;
}

.card1 {
  max-width: 100%;
  margin-bottom: 10px;

  .card-info-content {
    display: flex;

    .info {
      padding-left: 20px;
      flex: 1;
      font-size: 16px;

      div {
        margin-bottom: 10px;
      }
    }
  }
}

.card2 {
  max-width: 100%;

  .controller {
    font-size: 16px;
    margin-top: 10px;
  }

  .brightness-controller {
    span {
      margin-right: 10px;
    }

    div {
      margin-top: 5px;
    }
  }

  .time-controller {
    span {
      margin-right: 10px;
    }

    div {
      margin-top: 5px;
    }
  }
}
</style>
